<template>
  <div>
    <ul id="menu">
        <li data-menuanchor="page1" class="active"><a href="#page1">Section 1</a></li>
        <li data-menuanchor="page2"><a href="#page2">Section 2</a></li>
        <li data-menuanchor="page3"><a href="#page3">Section 3</a></li>
    </ul>

    <full-page :options="options" @after-load="afterLoad" id="fullpage">
      <div class="section">
        <h3>Section 1</h3>
      </div>
      <div class="section">
        <div class="slide">
           <h3>Slide 2</h3>
        </div>
      </div>
      <div class="section">
         <h3>Section 3</h3>
      </div>
    </full-page>
  </div>
</template>

<script>
import FullPage from '../node_modules/vue-fullpage.js/src/FullPage.vue'

export default {
  components: {
    FullPage
  },

  data () {
    return {
      options: {
        afterLoad: this.afterLoad,
        scrollBar: true,
        menu: '#menu',
        navigation: true,
        anchors: ['page1', 'page2', 'page3'],
        sectionsColor: ['#41b883', '#ff5f45', '#0798ec', '#fec401', '#1bcee6', '#ee1a59', '#2c3e4f', '#ba5be9', '#b4b8ab']
      }
    }
  },

  methods: {
    afterLoad () {
      console.log("Emitted 'after load' event.")
    }
  }
}
</script>
